<template>
  <div class="app-container">

    <el-container>

      <el-aside>
        <span>组织机构</span>
        <el-divider class="divider" />
        <el-tree
          :data="treeData"
          :props="defaultProps"
          accordion
          default-expand-all
        />

      </el-aside>

      <el-main>

        <el-row class="search-condition">
          <el-form :inline="true">
            <el-form-item>
              <el-select placeholder="活动区域">
                <el-option label="区域一" value="shanghai" />
                <el-option label="区域二" value="beijing" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" icon="el-icon-search">查询</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <data-grid :custom-data-grid="customAttendDataGrid" @page-change="pageChange" />
      </el-main>
    </el-container>
  </div>
</template>

<script>

import DataGrid from '@/components/DataGrid/index'
import positionManage from '@/api/sytsem-permission'

export default {
  name: 'ComplexTable',
  components: { DataGrid },
  data() {
    return {
      customAttendDataGrid: {
        list: [],
        table: {
          tableMaxHeight: 'unset',
          tableWidth: '100%',
          marginTop: 24,
          border: true,
          showPagination: true,
          showOperation: true,
          showHeader: true,
          indexWidth: 10,
          showIndex: true,
          fontSize: 16,
          cellBtn: {
            fontColor: '#ffffff'
          },
          headerCellStyle: {
            backgroundColor: '#e9f8ff',
            color: '#333333',
            fontSize: '16px'
          },
          cellStyle: {
            fontSize: '20px'
          }
        },
        page: {
          layout: 'sizes, prev, pager, next',
          pageSizes: [10, 20, 50, 100, 200],
          total: 1,
          currentPage: 1
        },
        columns: [
          { label: '名称', align: 'left', prop: 'name' },
          { label: '编码', align: 'center', prop: 'account' },
          { label: '部门主管', align: 'center', prop: 'phone' },
          { label: '排序', align: 'center', prop: 'phone' }
        ],
        topButtons: [
          { name: '新增', type: 'primary', icon: 'el-icon-plus', plain: true, click: () => { this.dialogOpen('add') } }
        ],
        _this: this,
        rowButtons: [
          { name: '修改', icon: 'el-icon-edit', click: (row) => {
            this.dialogOpen('update')
            this.userForm = JSON.parse(JSON.stringify(row))
            console.log(row)
          } },
          { name: '删除', icon: 'el-icon-delete', click: (row) => { this.deleteUser(row.id) } }
        ]
      },
      listQuery: {
        page: 1,
        size: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      },
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  created() {
    this.getPositionList();
    this.getDepartmentList();
  },
  methods: {
    getPositionList: function() {
      positionManage.findPositionList(this.listQuery).then(data => {
        this.customAttendDataGrid.list = data.content
      })
    },
    getDepartmentList:function () {
      positionManage.findDepartmentTree().then(data=>{
        this.treeData = data;
      })
    }
  }
}
</script>

<style>
.divider{
  margin: 10px 0 !important;
}
</style>
